<template>
    <div class="header">
        <div class="btn-operate" v-if="activeValue == 'task-statistics'">
            <el-button
                v-for="item in actualSponsors"
                :type="item.userCode == currentUserCode ? 'primary' : ''"
                :key="item.userCode"
                :value="item.userCode"
                @click="handleSponsor(item.userCode)"
            >
                {{ item.sponsor }}
            </el-button>
        </div>
        <el-tabs v-model="activeValue" @tab-click="tabClick">
            <el-tab-pane v-for="item in panes" :label="item.label" :name="item.name" :key="item.key">
                <component
                    :is="item.content"
                    :activeValue="activeValue"
                    @tab-change="tabChange"
                    :echartParams="echartParams"
                    :currentUserCode="currentUserCode"
                ></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { getUser } from '@/utils/user-util';
import { Component, Vue } from 'vue-property-decorator';
import TaskDetail from './fund-pending-manage/task-detail.vue';
import TaskDivisionManage from './fund-pending-manage/task-division-manage.vue';
import TaskStatistics from './fund-pending-manage/task-statistics-plus.vue';
import * as api from './api/fund-pending-manage';
import { uniqueFunc } from '@/utils/tools';
@Component({ name: 'FundPendingManage', components: { TaskStatistics, TaskDetail, TaskDivisionManage } })
export default class FundPendingManage extends Vue {
    activeValue: string = '';
    panes: any[] = [
        {
            label: '任务统计',
            name: 'task-statistics',
            content: 'TaskStatistics',
        },
        {
            label: '任务明细',
            name: 'task-detail',
            content: 'TaskDetail',
        },
        {
            label: '用户分工配置',
            name: 'task-division-manage',
            content: 'TaskDivisionManage',
        },
    ];
    echartParams: any = {
        isClick: true,
    };

    async created() {
        try {
            await this.getUserOptions();
            this.activeValue = 'task-statistics';
        } finally {
            this.activeValue = 'task-statistics';
        }
    }

    mounted() {
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    // 标签页内跳转
    tabChange($event) {
        const { name, params } = $event;
        console.log($event, '$event-----------------change');
        this.activeValue = name;
        this.echartParams = { params, isClick: false };
    }

    // 点击标签
    tabClick() {
        this.echartParams.isClick = true;
    }

    get actualSponsors() {
        this.sponsors.unshift({ userCode: '', sponsor: '全部' });
        return this.sponsors;
    }

    sponsors: any = [
        {
            userCode: '122',
            sponsor: '小李',
        },
        {
            userCode: '123',
            sponsor: '小谭',
        },
        {
            userCode: '124',
            sponsor: '小陶',
        },
    ];
    currentUserCode: string = getUser().userCode;
    // 主办人下拉数据
    getUserOptions() {
        return new Promise((resolve, reject) => {
            api.taskSetting()
                .then((res: any) => {
                    const obj = res.find(item => item.userCode == getUser().userCode);
                    if (!obj) {
                        // 当前用户不为主办人时，展示全部
                        this.currentUserCode = '';
                    }
                    res = uniqueFunc(res, 'userCode');
                    this.sponsors = res;
                    resolve(res);
                })
                .catch(err => {
                    this.currentUserCode = '';
                    reject(err);
                    console.log(err, 'settingUser');
                });
        });
    }

    // 主办人改变
    handleSponsor(userCode: string) {
        this.currentUserCode = userCode;
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';
.header {
    min-width: 1200px;
    padding-top: 4px;
    height: 100%;
    width: 100%;
    .btn-operate {
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 100;
        width: fit-content;
        .el-button {
            padding: 4px 2px;
            &:last-child {
                margin-left: 4px;
            }
        }
        & > button {
            margin: 0 2px;

            & > span {
                color: #333;
            }
        }
        & > .el-button--primary {
            color: #ba926f;
            background-color: #fff;
            // & > span {
            //     color: #ba926f !important;
            // }
        }
    }
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    // border: 1px solid #e4e7ed;
    // border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs {
    height: 100%;
    .el-tabs__nav {
        border: none;
        // z-index: 1;
        // .is-active {
        //     border-color: #409eff;
        //     border-bottom: 2px solid #409eff;
        // }
    }
    .el-tabs__content {
        // padding: 20px;
        height: calc(100% - 35px);
        overflow: auto;
        .el-tab-pane {
            color: #333;
            height: 100%;
        }
    }
}

/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}
</style>
